<template>
	<div>
		<div class="mb16">
			<button class="gjsx" @click="toggleSelection">高级筛选 <img src="../img/高级筛选.png"
					style="height: 15px;" /></button>
			<div class="ml1">
				<el-input type="text" maxlength="20" placeholder="输入地址/房号/电话/姓名" class="el-input" />
				<el-button type="primary"
					style="height: 40px; background-color: white;color: black; border: none;">搜索</el-button>
			</div>
		</div>
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="进行中" name="one">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<DaiShenHeGDSXVue></DaiShenHeGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<!-- 创建工单-->
					<div class="addGongDan">
						<addGongDanVue></addGongDanVue>
					</div>
					<!-- 列表-->
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection"  width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span></span>&nbsp;&nbsp;
									<el-tag type="success">进行中</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column fixed="right" label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column prop="" label="审核人" width="80" align="center" />
							<el-table-column prop="" label="审核时间" width="180" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="未开始" name="two">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<DaiShenHeGDSXVue></DaiShenHeGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<!-- 创建工单-->
					<div class="addGongDan">
						<addGongDanVue></addGongDanVue>
					</div>
					<!-- 列表-->
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection"  width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span></span>&nbsp;&nbsp;
									<el-tag type="success">未开始</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column fixed="right" label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column prop="" label="审核人" width="80" align="center" />
							<el-table-column prop="" label="审核时间" width="180" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="已逾期" name="three">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<DaiShenHeGDSXVue></DaiShenHeGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<!-- 创建工单-->
					<div class="addGongDan">
						<addGongDanVue></addGongDanVue>
					</div>
					<!-- 列表-->
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection"  width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span></span>&nbsp;&nbsp;
									<el-tag type="success">已逾期</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column fixed="right" label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column prop="" label="审核人" width="80" align="center" />
							<el-table-column prop="" label="审核时间" width="180" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="由我处理" name="four">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<DaiShenHeGDSXVue></DaiShenHeGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<!-- 创建工单-->
					<div class="addGongDan">
						<addGongDanVue></addGongDanVue>
					</div>
					<!-- 列表-->
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection"  width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span></span>&nbsp;&nbsp;
									<el-tag type="success">未开始</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column prop="" label="审核人" width="80" align="center" />
							<el-table-column prop="" label="审核时间" width="180" align="center" />
							<el-table-column prop="" label="审核原因" width="180" align="center" />
							<el-table-column prop="" label="完成时间" width="180" align="center" />
							<el-table-column prop="" label="作废人" width="80" align="center" />
							<el-table-column prop="" label="作废时间" width="180" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="已完成" name="five">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<DaiShenHeGDSXVue></DaiShenHeGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<!-- 创建工单-->
					<div class="addGongDan">
						<addGongDanVue></addGongDanVue>
					</div>
					<!-- 列表-->
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection"  width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span></span>&nbsp;&nbsp;
									<el-tag type="success">未开始</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column prop="" label="审核人" width="80" align="center" />
							<el-table-column prop="" label="审核时间" width="180" align="center" />
							<el-table-column prop="" label="审核原因" width="180" align="center" />
							<el-table-column prop="" label="完成时间" width="180" align="center" />
							<el-table-column prop="" label="作废人" width="80" align="center" />
							<el-table-column prop="" label="作废时间" width="180" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="已作废" name="six">
				<div class="ShaiXuan" v-show="isSelectionVisible">
					<div class="ShaiXuanFrom">
						<DaiShenHeGDSXVue></DaiShenHeGDSXVue>
					</div>
				</div>
				<div class="GongDanList">
					<!-- 创建工单-->
					<div class="addGongDan">
						<addGongDanVue></addGongDanVue>
					</div>
					<!-- 列表-->
					<div class="GongDanLB">
						<el-table ref="multipleTableRef" :data="tableData1" style="width: 100%">
							<el-table-column fixed="left" type="selection"  width="55" />
							<el-table-column label="工单来源" prop="" width="80" align="center" />
							<el-table-column label="分类" prop="" width="80" align="center" />
							<el-table-column label="工单号" prop="" width="120" align="center" />
							<el-table-column label="创建时间" prop="" width="160" align="center" />
							<el-table-column label="起止时间" width="280" align="center">
								<template #default="{ row }">
									<span></span>&nbsp;&nbsp;
									<el-tag type="success">未开始</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="80" align="center" />
							<el-table-column label="执行人" width="120" align="center" />
							<el-table-column prop="" label="工单标签" width="120" align="center" />
							<el-table-column prop="" label="最近更新时间" width="180" align="center" />
							<el-table-column label="工作内容" prop="content" show-overflow-tooltip align="center"
								width="240" />
							<el-table-column prop="" label="地址" width="120" align="center" />
							<el-table-column prop="" label="审核人" width="80" align="center" />
							<el-table-column prop="" label="审核时间" width="180" align="center" />
							<el-table-column prop="" label="审核原因" width="180" align="center" />
							<el-table-column prop="" label="完成时间" width="180" align="center" />
							<el-table-column prop="" label="作废人" width="80" align="center" />
							<el-table-column prop="" label="作废时间" width="180" align="center" />
							<el-table-column fixed="right" label="操作" width="80" align="center">
								<el-button link type="primary" size="small">详情</el-button>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts" setup>
	import DaiShenHeGDSXVue from './DaiShenHeGDSX.vue';
	import addGongDanVue from './addGongDan.vue';
	import { ref } from 'vue'
	import type { TabsPaneContext } from 'element-plus'
	const isSelectionVisible = ref(false);
	function toggleSelection() {
		isSelectionVisible.value = !isSelectionVisible.value;
	}
	const activeName = ref('one')

	const handleClick = (tab : TabsPaneContext, event : Event) => {
		console.log(tab, event)
	}
</script>

<style scoped>
	.gjsx {
		background-color: white;
		padding: 10px 15px;
	}

	.mb16 {
		float: right;
		width: 500px;
		margin-bottom: -38px;
		/* 增加下方间距 */
		margin-top: -8px;
		/* 减少上方间距 */
		display: flex;
		justify-content: flex-end;
		position: relative;
		z-index: 999;
	}

	.ml1 {
		width: 300px;
		border: none;
		margin-left: 10px;
		display: inline-table;

	}

	.el-input {
		width: 240px;
		height: 40px;
		line-height: 40px;
		border: none;
	}
	.addGongDan {
		padding-top: 15px;
		margin-right: 1500px;
	}
	.GongDanList {
		border-radius: 10px;
		background-color: white;
	}
	
	.GongDanLB {
		margin-top: 10px;
		width: 100%;
	}
	.ShaiXuan {
		width: 1200x;
		border-radius: 10px;
		background-color: white;
		margin-bottom: 10px;
		padding-bottom: 20px;
	}
	
	.ShaiXuanFrom {
		padding-top: 25px;
		padding-left: 30px;
	}
	
</style>